<template>
  <div class='className'>
    <el-card class='anoCard'>
      <div slot='header'>
        <span>菜单管理</span>
      </div>
      <div class='searchDiv'>
        <el-input
          type='text'
          placeholder='请输入订单号'
          class='width1'
          v-model='sch_order'
        ></el-input>
        <el-date-picker
          class='width1'
          v-model='sch_date'
          type='date'
          placeholder='选择日期时间'
          value-format='yyyy-MM-dd'
        ></el-date-picker>
        <el-button type='primary' icon='el-icon-search' @click='searchTab()'
        >搜索
        </el-button
        >
        <el-button
          type='primary'
          @click='editTable1()'
        >添加
        </el-button
        >
        <el-button
          type='primary'
          icon='el-icon-delete'
          class='handle-del mr10'
          @click='delAllSelection(ids)'
        >批量删除
        </el-button>
      </div>

      <!--      {{tableData}}-->
      <el-table :data='tableData' border :fit='true' @selection-change='handleSelectionChange'>
        <el-table-column type='selection' width='55' align='center'></el-table-column>
        <el-table-column prop='id' label='序号' width='60'></el-table-column>
        <el-table-column prop='parentId' label='父级ID'></el-table-column>
        <el-table-column prop='name' label='前端名称' :width='tableWidth'></el-table-column>
        <el-table-column prop='title' label='菜单名称' :width='tableWidth'></el-table-column>
        <el-table-column prop='level' label='菜单级数' :width='tableWidth'></el-table-column>
        <el-table-column prop='sort' label='菜单排序' :width='tableWidth'></el-table-column>
        <el-table-column prop='createTime' label='创建时间' :width='tableWidth'></el-table-column>
        <el-table-column prop='icon' label='前端图标' :width='tableWidth'></el-table-column>
        <el-table-column prop='hidden' label='前端隐藏' :width='tableWidth'></el-table-column>
        <el-table-column label='操作' width='160'>
          <template slot-scope='scope'>
            <el-button
              type='primary'
              @click='editTable(scope.$index, scope.row)'>编辑
            </el-button>
            <el-button
              type='warning'
              @click='toConfirm(scope.row)'
              :disabled='scope.row.status === 1 ? false : true'>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout='total, sizes, prev, pager, next'
        :page-sizes='pageSizes'
        :page-size='pageSize'
        :current-page='currentPage'
        :total='total'
        class='fyDiv'
        @size-change='handleSize'
        @current-change='handlePage'
      >
      </el-pagination>
    </el-card>
    <el-dialog title='活动表单修改' :visible.sync='diaIsShow' class='diaForm'>
      <el-form
        ref='diaForm'
        :model='formData'
        :rules='rules'
        label-width='140px'
      >
        <el-form-item label='员工名称'>
          <el-input
            type='text'
            v-model='formData.username'
          ></el-input>
        </el-form-item>
        <el-form-item label='密码'>
          <el-input
            type='text'
            v-model='formData.password'
            :disabled='true'
          ></el-input>
        </el-form-item>
        <el-form-item label='id'
                      style='display: none'>
          <el-input
            type='text'
            v-model='formData.id'
          ></el-input>
        </el-form-item>
        <el-form-item label='头像'>
          <el-input
            type='text'
            v-model='formData.icon'
          ></el-input>
        </el-form-item>
        <el-form-item label='邮箱'>
          <el-input
            type='text'
            v-model='formData.email'
          ></el-input>
        </el-form-item>
        <el-form-item label='昵称'>
          <el-input
            type='text'
            v-model='formData.nickName'
          ></el-input>
        </el-form-item>
        <el-form-item label='备注信息'>
          <el-input
            type='text'
            v-model='formData.note'
          ></el-input>
        </el-form-item>
        <el-form-item label='创建时间' prop='time'>
          <el-date-picker
            v-model='formData.createTime'
            type='datetime'
            placeholder='选择日期时间'
            value-format='yyyy-MM-dd HH:mm:ss'
            :disabled='true'
          ></el-date-picker>
        </el-form-item>
        <el-form-item label='登录时间' prop='time'>
          <el-date-picker
            v-model='formData.loginTime'
            type='datetime'
            placeholder='选择日期时间'
            value-format='yyyy-MM-dd HH:mm:ss'
            :disabled='true'
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type='primary' @click='changeTab'>确认
          </el-button>
          <el-button @click='diaIsShow = false'>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <el-dialog title='添加' :visible.sync='diaIsInsert' class='diaForm'>
      <el-table :data='tableDatastate' border :fit='true' @selection-change='handleSelectionChangeInsert'>
        <el-table-column type='selection' width='55' align='center'></el-table-column>
        <el-table-column prop='id' label='序号' width='60'></el-table-column>
        <el-table-column prop='name' label='商品名称'></el-table-column>
        <el-table-column prop='stock' label='库存数量' :width='tableWidth'></el-table-column>
        <el-table-column prop='brand_name' label='品牌名称'></el-table-column>
      </el-table>
      <el-button
        type='primary'
        icon='el-icon-delete'
        class='handle-del mr10'
        @click='InsertSelection'
      >参加活动
      </el-button>
    </el-dialog>


  </div>
</template>

<script>
import { getPageTab2 } from '@/api/table'

export default {
  data() {
    return {
      multipleSelection: [],
      multipleSelectionInsert: [],
      tableWidth: 165,
      tableData: [],
      tableDatastate: [],
      ids: [],
      allList: [],
      schArr: [],
      sch_order: '',
      sch_status: null,
      sch_date: null,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      pageSizes: [10, 20, 30, 40],
      diaIsShow: false,
      diaIsInsert: false,
      formData: {},
      editType: '',
      options: [
        { label: '待审核', value: 1 },
        { label: '配送中', value: 2 },
        { label: '已完成', value: 0 },
        { label: '已取消', value: 3 }
      ],
      rowIndex: 0,
      rules: {
        // order: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
        time: [
          {
            // type: 'datetime',
            required: true,
            message: '请输入时间',
            trigger: 'change'
          }
        ],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        status: [
          { required: true, message: '请选择订单状态', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this._getPageTab2(),
      this.list()
  },
  filters: {
    statusText(val) {
      if (val === undefined) return
      if (val === 1) {
        return '启用'
      } else {
        return '禁用'
      }
    }, payText(val) {
      if (val === undefined) return
      if (val === 0) {
        return '未支付'
      } else if (val === 1) {
        return '支付宝'
      } else if (val === 2) {
        return '微信'
      } else {
        return '已取消'
      }
    }, delText(val) {
      if (val === undefined) return
      if (val === 0) {
        return '未删除'
      } else {
        return '已删除'
      }
    }, conText(val) {
      if (val === undefined) return
      if (val === 0) {
        return '未确认'
      } else {
        return '已确认'
      }
    },
    tagClass(val) {
      if (val === undefined) return
      if (val === 0) {
        return 'success'
      } else if (val === 1) {
        return 'info'
      } else if (val === 2) {
        return 'warning'
      } else {
        return 'danger'
      }
    }
  },
  methods: {
    handleSize(val) {
      this.pageSize = val
      this.getPageData()
    },

    handlePage(val) {
      this.currentPage = val
      this.getPageData()
    },
    _getPageTab2() {
      getPageTab2()
        .then(res => {
          this.allList = res.data.tableList
          this.schArr = this.allList
          this.getPageData()
          this.total = res.data.total
        })
        .catch(error => {
          this.$message.error(error.message)
        })
    },
    getPageData() {
      let start = this.currentPage
      let end = this.pageSize
      let param = new URLSearchParams()
      param.append('page', start)
      param.append('size', end)
      this.$http.post('/system/ums_menu/findPage', param).then(data => {
        console.log(data)
        this.tableData = data
      }).catch(error => {
        console.log(error)
      })
    },
    list() {
      let start = this.currentPage
      let end = this.pageSize
      let param = new URLSearchParams()
      param.append('page', start)
      param.append('size', end)
      this.$http.post('/system/ums_menu/findPage').then(data => {
        console.log(data)
        this.tableData = data
      }).catch(error => {
        console.log(error)
      })
    },
    // 查找
    searchTab() {
      let arrList = []
      for (let item of this.allList) {
        if (
          this.sch_order.trim() === '' &&
          this.sch_status === null &&
          this.sch_date === null
        ) {
          arrList = this.allList
          break
        } else if (
          item.order.startsWith(this.sch_order) &&
          (this.sch_status !== null ? item.status === this.sch_status : true) &&
          (this.sch_date !== null ? item.time.startsWith(this.sch_date) : true)
        ) {
          let obj = Object.assign({}, item)
          arrList.push(obj)
        }
      }
      this.schArr = arrList
      this.total = arrList.length
      this.currentPage = 1
      this.pageSize = 10
      this.getPageData()
    },
    // add
    addTab() {
      this.formData = {}
      this.diaIsShow = true
      this.formData.order = (Math.random() * 10e18).toString()
      this.formData.id = this.allList.length + 1
      this.editType = 'add'
      this.$nextTick(() => {
        this.$refs.diaForm.clearValidate()
      })
    },
    // 审核
    toConfirm(row) {
      row.status = 2
      this.$notify({
        title: '成功',
        message: '审核提交成功',
        type: 'success'
      })
    },
    // 完成
    toSuccess(row) {
      row.status = 0
      this.$notify({
        title: '成功',
        message: '该订单已完成配送',
        type: 'success'
      })
    },
    // 取消
    toDelete(row) {
      row.status = 3
      this.$notify({
        title: '成功',
        message: '已取消该订单',
        type: 'success'
      })
    },
    // 编辑
    editTable(index, row) {
      this.formData = Object.assign({}, row)
      this.editType = 'update'
      this.diaIsShow = true
      this.$nextTick(() => {
        this.$refs.diaForm.clearValidate()
      })
      this.rowIndex = index
    },
    // 添加
    editTable1() {
      this.diaIsInsert = true
      this.$nextTick(() => {
        this.$refs.diaForm.clearValidate()
      })
      this.rowIndex = index
    },
    // 多选操作(删除)
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 多选操作(添加)
    handleSelectionChangeInsert(val) {
      this.multipleSelectionInsert = val
    },
    InsertSelection() {
      let str = ''
      for (let i = 0; i < this.multipleSelectionInsert.length; i++) {
        str += this.multipleSelectionInsert[i].id + ','
      }
      this.$http({
        url: 'http://localhost:8000/system/pms_product/pms_productUpdateState',
        method: 'post',
        params: { str: str }
      }).then(res => {
        if (res == true) {
          this.$message.success('参加成功')
          this.diaIsInsert = false
          this.list()
          this.listState()
        } else {
          this.$message.success('参加成功')
          this.diaIsInsert = false
          this.list()
          this.listState()
        }

      })
    },
    //批量删除
    delAllSelection(rows) {

    },
    //修改
    changeTab() {
      let username = this.formData.username
      let email = this.formData.email
      let nickName = this.formData.nickName
      let note = this.formData.note
      let id = this.formData.id
      let param = new URLSearchParams()
      param.append('username', username)
      param.append('email', email)
      param.append('nickName', nickName)
      param.append('note', note)
      param.append('id', id)
      this.$http.post('/system/ums_admin/updAll', param).then(data => {
        if (data > 0) {
          this.$message.success('修改成功')
          this.diaIsShow = false
          this.list()
        } else {
          this.$message.error('修改失败')
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.fyDiv {
  float: right;
  margin-top: 30px;
  padding-bottom: 20px;
}

.anoCard .el-table .el-button {
  padding: 8px 18px;
  font-size: 12px;
}

.searchDiv {
  margin-bottom: 20px;

  .el-button {
    padding: 11px 20px;
  }
}

.width1 {
  width: 180px;
  margin-right: 10px;
}

.diaForm {
  .el-input {
    width: 350px;
  }
}
</style>
<style lang='scss'>
.anoCard {
  .el-card__body:after {
    content: '';
    clear: both;
    width: 0;
    height: 0;
    visibility: hidden;
    display: block;
  }
}

.diaForm .el-form-item__label {
  padding-right: 20px;
}

.searchDiv [class^='el-icon'] {
  color: #fff;
}
</style>
